<template>
    <div class="section-wrap hotworkApprove">
        <div class="form-section">
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>项目名称</label>
                </div>
                <div class="newcompanyList approvehide">
                    <!-- {{dataList.DeptName}} -->
                    {{userInfo.departsir == 2?userInfo.pdeptname:dataList.DeptName}}
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>申请动火班组</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="newcompanyList approvehide">
                    {{dataList.FireSquad}}
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>动火班组负责人</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="newcompanyList approvehide">
                    {{dataList.GroupPerson}}
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>动火人</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="newcompanyList approvehide">
                    {{dataList.Person}}
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>动火部位</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <!-- <textarea class="areainfo"
                              height="500"
                              v-model="dataList.FireParts"
                              :disabled="isDisable"></textarea> -->
                    <p class="textarea">{{dataList.FireParts}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>动火级别</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="newcompanyList"
                     style="width: 200px;height: 54px;overflow: hidden;">
                    {{dataList.Level}}
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>动火作业种类</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="newcompanyList approvehide">
                    {{dataList.JobClass?dataList.JobClass:'用火'}}
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>申请日期</label>
                </div>
                <div class="newcompanyList approvehide">
                    {{dataList.CreateDate | filterdata}}
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>动火开始日期</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="newcompanyList approvehide">
                    {{dataList.StartDate | filterdata}}
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>动火结束日期</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="newcompanyList approvehide">
                    {{dataList.EndDate | filterdata}}
                </div>
            </div>
        </div>
        <div class="form-section">
            <div class="saveFiretit">
                灭火器材配置情况现场防火措施预案
            </div>
            <!-- <checklist :options="commonList" 
                        @click="selectChange"  
                        v-model="checkOpt"></checklist>    -->

            <div class="saveChecklist"
                 v-for="(checkOne,index) in commonList"
                 :key="index">
                <input class="saveCheckInp"
                       type="checkbox"
                       disabled="false"
                       :class="{'checkedopt': checkStatusList.indexOf(checkOne)>=0}"
                       :checked="checkStatusList.indexOf(checkOne)>=0"
                       @click='checkedOne(checkOne)'>
                <span>{{checkOne}}</span>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>动火必须做到</label>
                    </div>
                    <span v-if="Measure"
                          @click="unfoldMeasure = !unfoldMeasure">{{unfoldMeasure?'收起': '展开'}}</span>
                </div>
                <div class="msgArea"
                     :class="{'unfold':unfoldMeasure}">
                    <div v-if="Measure"
                         v-for="(item,index) in Measure"
                         :key="index">{{item | myTrim}}</div>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>申请人意见</label>
                </div>
                <div>
                    <!-- <x-textarea :height="60"
                                v-model="dataList.Propose"
                                :disabled="isDisable"></x-textarea> -->
                    <p class="textarea">{{dataList.Propose}}</p>
                </div>
            </div>
            <!-- <div class="form-item form-item-style2" v-if="syself">
                <div class="label-title">
                    <label>审批意见</label>
                </div>
                <div>
                    <x-textarea :placeholder="('请输入意见(自动换行)')" :max="2000" :height="50" v-model="ApproveRemark"></x-textarea>
                </div>
            </div>
            <div class="form-item form-item-style1" v-if="syself">
                <div class="label-title">
                    <label>审批结论</label>
                </div>
                <div class="select-section">
                    <div :class="{'active': ApproveResult}"
                         @click="ApproveResult=true">
                        通过
                    </div>
                    <div :class="{'active': !ApproveResult}"
                         @click="ApproveResult=false">
                        不通过
                    </div>
                </div>
            </div> -->

            <!-- 审批信息 -->
            <div class="approveBox"
                 v-if='approveStatus'>
                <div class="approveTit">审批信息</div>
                <div class="approveWrap"
                     v-if='dataList.ApproveInfo.length>0'
                     v-for="(item,index) in dataList.ApproveInfo"
                     :key="index">
                    <div class="form-item form-item-style2">
                        <div class="label-title">
                            <label>审批意见</label>
                        </div>
                        <div>
                            <!-- <textarea class="areainfo"
                                      height="500"
                                      placeholder="请输入审批意见"
                                      v-model="item.Remark"
                                      :disabled="isDisable"></textarea> -->
                            <p class="textarea">{{item.Remark}}</p>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批结论</label>
                        </div>
                        <div class="newcompanyList approvehide">
                            {{item.ApproveResult}}
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批人</label>
                        </div>
                        <div class="newcompanyList approvehide">
                            {{item.ApprovePersonName}}
                        </div>
                    </div>
                </div>
                <div class="approveContent"
                     v-if="syself">
                    <div class="form-item form-item-style2">
                        <div class="label-title">
                            <label>审批意见</label>
                        </div>
                        <div>
                            <textarea class="areainfo"
                                      height="500"
                                      placeholder="请输入审批意见"
                                      v-model="ApproveRemark"></textarea>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批结论</label>
                        </div>
                        <div class="select-section">
                            <div :class="{'active': ApproveResult}"
                                 @click="ApproveResult=true">
                                通过
                            </div>
                            <div :class="{'active': !ApproveResult}"
                                 @click="ApproveResult=false">
                                不通过
                            </div>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批人</label>
                        </div>
                        <div class="newcompanyList approvehide">
                            {{userInfo.username}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="btns"
                 v-if="syself">
                <button @click="tosavemsg">提交</button>
            </div>
        </div>

        <myMenu></myMenu>
    </div>
</template>
<script>
import myMenu from '@/commonComponents/menu'
export default {
    components: {
        myMenu
    },
    data () {
        return {
            dataList: {
                DeptName: '',//项目名称
                FireSquad: '',//申请动火班组
                GroupPerson: '',//动火班组负责人
                person: '',//动火人
                FireParts: '',//动火部位
                level: '',//动火级别
                JobClass: '',//动火作业种类
                CreateDate: '',//申请日期
                StartDate: '',//动火开始日期
                EndDate: '',//动火结束日期
                PlanText: '',//灭火器材配置
            },
            checkStatusList: [],//措施预案选择集合
            isDisable: true,//是否可编辑
            unfoldMeasure: false,//展开隐患措施
            commonList: ['动火方案', '配备灭火器', '明确动火监护人', '动火点周围可燃材料已清理', '动火人配备安全防护用品(如防护罩、防护手套等）', '是否动火旁站监督'],//措施预案选项 
            Measure: [
                '1.动火人必须有特种作业人员操作证、经审批的动火证，严格按照操作规程动火。',
                '2.动火前清除周围10m内的易燃、易爆物品，遇有无法清除的易燃物必须采取可靠的隔离防火措施。',
                '3.动火区域必须有专人看火，同时配备灭火器材，看火人随时关注火区及周边防火安全，不得随意脱岗。',
                '4.风力超过5级时，不得进行高空动火作业正下方必须使用接火斗。',
                '5.凡涉及电、气焊等操作的明火作业，操作人员必须持证上岗。',
                '6.动火完毕，必须对现场进行检查，确认无火灾隐患，切断电源后方可离开。',
                '7.批准人勘查现场后才能批准申请。',
                '8.如遇突发情况，向项目有关人员反映，如有需要请及时拨打110、119、120等。'
            ],
            userId: '',
            tokenId: '',
            projectId: '',
            userInfo: '',
            ApproveRemark: '',//审批意见
            ApproveResult: true,//审批结论
            syself: '',
            addFlag: true,//提交开关（避免多次提交）  
            approveStatus: false//是否展示审批信息 
        }
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.userId = this.userInfo.userid;
        this.tokenId = this.userInfo.tokenId;
        this.projectId = this.userInfo.deptid;
        // this.syself = this.rolecheck();
        this.getData()
    },
    filters: {
        filterdata (val) {
            if (!val) {
                return false;
            }
            return val.substring(0, 10);
        },
    },
    methods: {
        rolecheck () {
            //index==1  验证是否是项目施工员  index==2  验证是否是设备管理员  
            let arr = [];
            let flag = false;
            arr = this.userInfo.usermode.split(",");
            arr.forEach(
                (item, index) => {
                    if (item == "分公司安全总监") {
                        flag = true;
                    }
                }
            )
            return flag;
        },
        // 获取详情数据
        getData () {
            let that = this
            let param = {
                'allowPaging': true,
                'business': 'GetFireJobDetail',
                'data': {
                    'id': this.$route.query.id
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': 'CD9D3B5786AF0333B02C53F1A84C45B6',
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    // console.log(res)
                    that.dataList = res.data.data
                    that.checkStatusList = that.dataList.PlanText.split(',')

                    that.syself = res.data.data.CanEdit
                    if (that.syself || res.data.data.ApproveInfo.length > 0) {
                        that.approveStatus = true
                    }
                }
            ).catch(response => {

            })
        },
        // 审批提交
        tosavemsg () {
            if (!this.addFlag) {
                return false
            }
            this.addFlag = false
            let param = {
                'allowPaging': true,
                'business': 'FireJobCheck',
                'data': {
                    id: this.$route.query.id, // String 动火作业ID
                    CheckResult: this.ApproveResult, // boolean 是否通过审核
                    ApproveRemark: this.ApproveRemark // String 审批人意见
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': this.tokenId,
                'userId': this.userId
            }
            this.$vux.loading.show({
                text: '正在提交中...'
            })
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    if (res.data.code == 0) {
                        this.$vux.toast.text('审核提交成功')
                        // this.$router.push({
                        //     path: '/workrisk'     
                        // })
                        this.$router.go(-1)
                    } else {
                        this.$vux.toast.text(res.data.info)
                        this.addFlag = true
                    }
                }
            ).catch(() => {
                this.addFlag = true
            })
        },
        //多选选择
        selectChange (val, label) {
            console.log('change', val, label)
        },
        //措施预案多选
        checkedOne (val) {
            var idIndex = this.checkStatusList.indexOf(val)
            if (idIndex >= 0) {
                this.checkStatusList.splice(idIndex, 1)
            } else {
                this.checkStatusList.push(val)
            }
        }
    }
}
</script>
<style lang="less" scoped>
.areainfo {
    font-size: 14px;
    font-family: '微软雅黑';
    color: #999;
    min-height: 50px;
}
.right-select {
    font-size: 14px;
    color: #999;
}
.right-select > i {
    color: #999;
}
.btns .green {
    // background: #15bc84;
}
.newcompanyList {
    font-size: 14px;
    text-align: right;
    color: #999;
}
.saveFiretit {
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #efeff4;
    margin-left: 20px;
    color: #2269ff;
    font-size: 15px;
}
.saveChecklist {
    height: 55px;
    line-height: 55px;
    font-size: 13px;
    margin-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid #efeff4;
}
.saveCheckInp {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 9px;
    background: #fff url('../../../assets/hideManage/uncheckedicon.jpg')
        no-repeat 0 0;
    background-size: 15px 15px;
}
.saveCheckInp.checkedopt {
    background: #fff url('../../../assets/hideManage/checkedicon.jpg') no-repeat
        0 0;
    background-size: 15px 15px;
}
.approvehide {
    width: 200px;
    height: 54px;
    overflow: hidden;
}
.select-section {
    display: flex;
    display: -webkit-flex;
    font-size: 14px;
}
.select-section div {
    padding-left: 26px;
    background: url(../../../../static/images/select.png) no-repeat left center;
    background-size: 17px 17px;
}
.select-section div:first-child {
    margin-right: 58px;
}
.select-section .active {
    background: url(../../../../static/images/selected.png) no-repeat left
        center;
    background-size: 17px 17px;
}
.hotworkApprove .msgArea {
    box-sizing: border-box;
    width: 100%;
    line-height: 25px;
    padding: 10px;
    font-size: 14px;
    height: 110px;
    overflow-y: hidden;
}
.hotworkApprove .msgArea.unfold {
    overflow: auto;
    height: auto;
}
.hotworkApprove .msgArea div {
    color: #999;
}
.approveWrap {
    border-bottom: 10px solid #ebeef2;
}
</style>
<style>
.hotworkApprove .vux-cell-value {
    color: #999;
}
.hotworkApprove .vux-x-textarea {
    width: 100%;
    border: 0 !important;
}
.hotworkApprove .form-item-style2 textarea {
    font-family: '微软雅黑';
    color: #999;
}
.approveBox {
    border-top: 10px solid #ebeef2;
}
.approveBox .approveTit {
    height: 55px;
    line-height: 55px;
    margin-left: 20px;
    font-size: 15px;
    color: #2269ff;
    border-bottom: 1px solid #efeff4;
}
</style>

